﻿@{
    Layout = "~/Views/Shared/_MiniLayout.cshtml";
    ViewBag.Title = "品牌管理";
}
@section header
{
}
<div class="mini-splitter" style="width: 100%; height: 100%;">
    <div size="240" showCollapseButton="true">
        <div class="mini-toolbar" style="padding: 2px; border-top: 0; border-left: 0; border-right: 0;">
            <span style="padding-left: 5px;">名称：</span>
            <input class="mini-textbox" name="name" />
            <a class="mini-button" iconCls="icon-search" plain="true">查找</a>
        </div>
        <div class="mini-fit">
            <ul id="treeData" class="mini-tree" url="@Url.Action("TreeData")" style="width: 100%;"
                showTreeIcon="true" textField="Name" idField="Id" parentField="Parent_Id" iconField="Icon" resultAsTree="false"></ul>
        </div>
    </div>
    <div showCollapseButton="true">
        <div class="mini-toolbar" style="padding: 2px; border-top: 0; border-left: 0; border-right: 0; text-align: right">
            <a class="mini-button" iconCls="icon-add" plain="true" onclick="create()">新增字典</a>
            <span data-bind="visible:showEdit">
                <a class="mini-button" iconCls="icon-remove" plain="true" onclick="remove()">删除</a>
                <a class="mini-button" iconCls="icon-save" plain="true" onclick="saveData()">保存</a>
            </span>
            <span class="separator"></span>
            <a class="mini-button" iconCls="icon-collapse" plain="true" onclick="refreshData()">刷新</a>
        </div>
        <div class="mini-fit">
            <div id="formData" style="padding: 5px;" data-bind="visible:showEdit">
                <input class="mini-hidden" name="Id" />
                <table class="table table-bordered">
                    <tr>
                        <th style="width: 120px;">名称：</th>
                        <td>
                            <input name="Name" class="mini-textbox" required="true" width="100%" maxlength="20" />
                        </td>
                    </tr>
                    <tr>
                        <th>编码：</th>
                        <td>
                            <input name="Code" class="mini-textbox" required="true" width="100%" maxlength="20" />
                        </td>
                    </tr>
                    <tr>
                        <th>是否有效：</th>
                        <td>
                            <input name="IsEnabled" class="mini-checkbox" />
                        </td>
                    </tr>
                    <tr>
                        <th>排序：</th>
                        <td>
                            <input name="Sort" class="mini-spinner" minValue="0" maxValue="999" value="0" />
                        </td>
                    </tr>
                    <tr data-bind="visible:!isNew()">
                        <td colspan="2">
                            <div class="mini-toolbar" style="border-bottom:0;padding:0px;">
                                <table style="width:100%;">
                                    <tr>
                                        <td style="width: 100%;">
                                            <a class="mini-button" iconCls="icon-add" onclick="newRow()" plain="true">增加</a>
                                            <a class="mini-button" iconCls="icon-edit" onclick="editRow()" plain="true">编辑</a>
                                            <span class="separator"></span><a class="mini-button" iconCls="icon-remove" onclick="deleteRow()" plain="true">删除</a>
                                            <a class="mini-button" iconCls="icon-add" onclick="saveRow()" plain="true">保存</a>
                                        </td>
                                        <td style="white-space:nowrap;"></td>
                                    </tr>
                                </table>
                            </div>
                            <div id="data-list" class="mini-datagrid" style="width: 100%; height: 100%; min-height: 300px;" idField="Id"
                                 showColumnsMenu="true" allowCellValid="true" emptyText='字典子项为空' showEmptyText="true"
                                 showPager="false" showReloadButton="true">
                                <div property="columns">
                                    <div field="Code" width="40px" headerAlign="center" hideable="true">
                                        编码
                                        <input property="editor" class="mini-textbox" style="width:100%;" required />
                                    </div>
                                    <div field="Name" width="80px" headerAlign="center" hideable="true">
                                        名称
                                        <input property="editor" class="mini-textbox" style="width:100%;" required />
                                    </div>
                                    <div field="Value" width="80px" headerAlign="center" hideable="true">
                                        值
                                        <input property="editor" class="mini-textbox" style="width:100%;" required />
                                    </div>
                                    <div field="Reserve1" width="80px" headerAlign="center" hideable="true">
                                        扩展1
                                        <input property="editor" class="mini-textbox" style="width:100%;" />
                                    </div>
                                    <div field="Reserve2" width="80px" headerAlign="center" hideable="true">
                                        扩展2
                                        <input property="editor" class="mini-textbox" style="width:100%;" />
                                    </div>
                                    <div field="Reserve4" width="80px" headerAlign="center" hideable="true">
                                        扩展3
                                        <input property="editor" class="mini-textbox" style="width:100%;" />
                                    </div>
                                    <div field="Remark" headerAlign="center" hideable="true">
                                        说明
                                        <input property="editor" class="mini-textbox" style="width: 100%;" />
                                    </div>
                                </div>
                            </div>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</div>
@section script
{
    <script type="text/javascript">
        var form = null;
        var tree;
        var grid = null, mg = null;
        var opts = {
            id: "data-list",
            dataUrl: '@Url.Action("DictItemList")',
            addUrl: "@Url.Action("AddItem")",
            editUrl: "@Url.Action("EditItem")",
        deleteUrl: "@Url.Action("DeleteItem")"
        };
        function beforeBind() {
            ovm.showEdit = ko.observable(false);
            ovm.isNew = ko.observable(false);
        }

        function docReady() {
            form = new mini.Form("formData");
            tree = mini.get("treeData");
            tree.on("nodeselect", function (e) {
                form.loading();
                var url = '@Url.Action("DictType")';
                $.getJSON(url, { id: e.node.Id }, function (json) {
                    form.reset();
                    ovm.showEdit(true);
                    ovm.isNew(false);
                    form.setData(json);
                    opts.dataUrl = '@Url.Action("DictItemList")' + '?id=' + e.node.Id;
                    mg = $.mini.grid();
                    grid = mg.init(opts);
                    mg.load();
                    form.unmask();
                });
            });
        };

        function create() {
            form.reset();
            ovm.showEdit(true);
            ovm.isNew(true);
        }

        function remove() {
            var data = form.getData();
            var url = '@Url.Action("Delete")';
            var param = {
                Id: data.Id,
                url: url,
                success: function () {
                    if (tree) {
                        tree.reload();
                    }
                    ovm.showEdit(false);
                }
            }
            $.mini.form.remove(param);
        }

        function saveData() {
            form.validate();
            if (!form.isValid()) {
                $.mini.message("请检查表单是否填写完整", "warning");
                return;
            }
            var data = form.getData();
            var url = data.Id ? '@Url.Action("Edit")' : '@Url.Action("Add")';
            var param = {
                data: data,
                url: url,
                success: function () {
                    if (tree) {
                        tree.reload();
                    }
                }
            }
            $.mini.form.save(param);
        }

        function newRow() {
            if (mg) {
                var id = form.getField("Id").value;
                var row = { DictTypeId: id };
                mg.newRow(row);
            }
        }

        function cancelRow() {
            if (mg) {
                mg.cancelRow();
            }
        }

        function editRow() {
            if (mg) {
                var row = grid.getSelected();
                if (row && row._uid)
                    mg.editRow(row._uid);
            }
        }

        function saveRow() {
            if (mg) {
                mg.updateRow();
            }
        }

        function deleteRow() {
            var row = grid.getSelected();
            if (row) {
                grid.removeRow(row);
            }
        }
    </script>

}